<template>
	<view class="container">

		<!-- <view class="bg-view">
			<view class="bg_box">
				<view class="top-nav"
					:style="'height:' + (titleBarHeight+titleBarHeight) + 'px;position:fixed;top:0;width:100vw;'">
					<view class="status_nav"
						:style="'height:' + statusBarHeight + 'px;position:fixed;top:0;width:100vw;'"></view>
					<view class="left-button-box" :style="'height:'+ titleBarHeight +'px;top:'+ statusBarHeight +'px;'"
						@click="tapToBack('back')">
						<image src="../../static/back.png" mode="aspectFill"></image>
					</view>
					<view
						:style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+ statusBarHeight +'px;position:fixed;width:100vw;'"
						class="Index_tab_top">
						<view class="mine-txt">积分兑换</view>
					</view>
				</view>
				<view :style="'width: 100vw;height:'+(titleBarHeight+titleBarHeight)+'px;'"></view>

				<view class="title_one">
					<view class="title_top">
						<view class="view1">每邀请1位好友+20积分</view>
					</view>

				</view>

			</view>

			<image src="https://imgs.ynz666.com/2023/12/06/MGY4MWM3ODY1ZDExZWIyMGZkMDc2NjEyZTkwNGQ4ZjY=.png"
				mode="widthFix" class="bg-image "></image>
		</view> -->


		<!-- <view class="main1">
			<view class="top">
				积分兑换区
			</view>
			<view class="bot" @click="jumpPageTab">
				<view class="item">
					<image src="https://imgs.ynz666.com/2023/12/06/ODAxYzY5OTY3MGRiMjViMjI4MDk4NGZiNzY1NDYxYTI=.png "
						mode="widthFix" class="img"></image>
				</view>
				<view class="item">
					<image src="https://imgs.ynz666.com/2023/12/06/MDU1ZTZkZDFkNWEwYWFhYzczZmNlOTk2YTI0MzllM2Y=.png"
						mode="widthFix" class="img"></image>
				</view>
				<view class="item">
					<image src="https://imgs.ynz666.com/2023/12/06/NmUxOTQ2YTFjMzkyNjAyZTFiMWFhZDE0NzBlMWQ4ZmQ=.png"
						mode="widthFix" class="img"></image>
				</view>
				<view class="item">
					<image src="https://imgs.ynz666.com/2023/12/06/Y2U3YzY3ZjM0MzQ0ZWM5YzdkMTllMGI2MTA0NTIyMDk=.png "
						mode="widthFix" class="img"></image>
				</view>
			</view>
		</view> -->

		<!-- data -->
		<view class="data">
			<view class="con">
				<view class="top">
					<image src="https://imgs.ynz666.com/2024/03/21/MTMyNTI3NWEwMTMxYTAyNzQ5ZjRjN2E2ZDI4ZWZkNGU=.png"
						mode="aspectFill" class="img"></image>
					<view class="v1">
						当前积分
					</view>
				</view>
				<view class="bot">
					{{freeData.points?freeData.points:0}}
				</view>
			</view>
			<view class="con">
				<view class="top">
					<image src="https://imgs.ynz666.com/2024/03/21/Y2NmOWYwZWRjMTg4N2QyOTAxN2RhNWI5NTJhMmU3MGE=.png"
						mode="aspectFill" class="img"></image>
					<view class="v1">
						可兑换免单券
					</view>
				</view>
				<view class="bot">
					{{freeData.freePreNum?freeData.freePreNum:0}}
				</view>
			</view>
		</view>

		<view class="poi_box1">
			<image src="https://imgs.ynz666.com/2024/04/07/NmNiMWNlMmVmNTdiZjg2ZmJiYWE5NmQzMjg1NGE2OTc=.png"
				mode="aspectFill" class="img" @click="jumpPageTab"></image>
		</view>

		<view class="main2">
			<view class="top">
				精选免单商家
			</view>
			<view class="bot">
				<!-- <view class="item" v-for="(item,itemIndex) in merchantList" @click="jumpDetil(item.id)"
					:key="itemIndex">
					<image :src="item.thumb_img" mode="aspectFill" class="img"></image>
					<view class="text">{{item.name}}</view>
				</view> -->
				<view class="b_item" v-for="(item,itemIndex) in merchantList" @click="jumpDetil(item.id)"
					:key="itemIndex">
					<view class="item_l">
						<image :src="item.thumb_img" mode="aspectFill" class="item_img"></image>
					</view>
					<view class="item_r">
						<view class="rig_v1">
							{{item.name}}
						</view>
						<view class="rig_v2">
							<view class="t1">
								<!-- ¥{{item.price?item.price/100:0}} -->
							</view>
							<view class="t2">
								免
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="main3">
			<view class="top">
				活动规则
			</view>
			<view class="bot">
				<view class="item">
					<view class="item_top">
						<view class="left">

						</view>
						<view class="right">
							活动内容
						</view>
					</view>
					<view class="item_bot">
						<view class="">
							1、邀请好友注册，同好友共同获得20积分
						</view>
						<view class="">
							2、消费可获得1:1对应平台积分
						</view>
					</view>
				</view>
				<view class="item">
					<view class="item_top">
						<view class="left">

						</view>
						<view class="right">
							积分兑换
						</view>
					</view>
					<view class="item_bot">
						<view class="">
							1、积分可在平台“积分商城”内选择兑换相应商品与免单券
						</view>
						<view class="">
							2、免单券使用方式：可在平台上任意一家免单合作权益店处使用
						</view>
						<view class="">
							3、1张免单券对应1次免单服务
						</view>
						<view class="">
							4、免单服务同免单券内容为准
						</view>
					</view>
				</view>
				<view class="item">
					<view class="item_top">
						<view class="left">

						</view>
						<view class="right">
							注意事项
						</view>
					</view>
					<view class="item_bot">
						<view class="">
							1、免单券无任何强制性附带消费，仅限线下到店使用
							解释权归下楼科技（深圳）有限公司所有
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="foot">
			<view class="btn">
				<view class="btn_box" v-if="!myInfo.status" @click="drawDown">
					<view class="view1">
						立即领取
					</view>
				</view>
				<view class="btn_box" v-if="myInfo.status" @click="sharePoster()">
					<view class="view1">
						邀请好友+20积分
					</view>
					<!-- <button open-type="share" class="btn_sha"></button> -->
				</view>
				<!-- <button v-if="!mineInfo.phone && mineInfo.phone.length!==11" open-type="getPhoneNumber"
					class="btn_pho" @getphonenumber.stop="onGetPhoneNumber"></button> -->
			</view>
		</view>

		<!-- 活动海报分享 -->
		<painter :palette="template" @imgOK="onImgOK" :widthPixels='1200'
			style='width:;height: ;position: absolute; left: -9999rpx;' />
		<!-- 活动海报分享 -->
		<view class="mask_hb" v-if="showPoster" @click="closeMask">
			<view class="mask_box">
				<image class="poster" :src="imagePath" mode="widthFix"></image>
				<view class="down_box1">
					<view class="box_btn1">
						<text>分享给好友</text>
						<button open-type="share" id="placard"></button>
					</view>
					<view class="box_btn2" @tap.stop="saveImg">
						保存到本地
					</view>
				</view>
				<view class="fot">
					<image src="https://imgs.ynz666.com/2023/12/04/NTZkZTQ5MmVlYTQxODdkMzE3ZDZjNTE0OTg2NGFjZmQ=.png"
						mode="scaleToFill" class="img" @click="closeOpenRedPacket"></image>
				</view>
			</view>




			<!-- 	<view v-if="imagePath" @tap.stop="saveImg" class="down-box"
				:style="'padding-bottom:'+(bottomTabbar>0?bottomTabbar:30)+'px;'">
				<image src="../../static/poster-save.png" mode="aspectFill"></image>
				<view>保存到相册</view>
			</view> -->

		</view>

		<view class="maskFour" v-if="modalFree">
			<view class="maskFour_box">
				<image src="https://imgs.ynz666.com/storeInfo/NDE1ODJkMGM5OTU4NmYwZmExNGMwZGZiMmMzNjhlMDA=.png"
					mode="scaleToFill" class="free_img"></image>
				<!-- <image src="https://imgs.ynz666.com/storeInfo/OWYwOGUwYWU2Njc3YjhmMWZlNWI0MTg3NTM4MTY4MjE=.png"
					mode="scaleToFill" class="free_btn" @click="getFreeCard"></image> -->
					<view class="btn_all">
				    <view class="btn1" @click="getFreeCard">
				    	暂不兑换
				    </view>
						<view class="btn2" @click="jumpPageTab">
							立即前往
						</view>
					</view>
				<image src="https://imgs.ynz666.com/test/2023/11/07/YzkzMDgxYzEwM2Y0YjQ1N2QyMDcxOWFlMThhYjdlZWQ=.png"
					mode="scaleToFill" class="free_close" @click="getFreeCard"></image>
			</view>
		</view>


	</view>
</template>

<script>
	var app = getApp();
	import customTabbar from '../../components/custom-tabbar/custom-tabbar.vue';
	// import http from '@/utils/request/http.js';
	import {
		userPointsStatus,
		userPoints,
		apiEsStoreList,
		apiEsFree
	} from '../../apis/index.js';
	import env from '@/env/index.js';
	import http from '@/utils/request/http.js';
	import painter from '@/wxcomponents/painter/painter';
	export default {

		components: {
			customTabbar,
			painter,
		},
		data() {
			return {
				statusBarHeight: 0,
				titleBarHeight: 0,
				bottomTabbar: 0,
				menuButtonInfo: {},
				mineInfo: {},

				codeimg: '', //分享码
				imagePath: '',
				showPoster: false,
				template: {},

				myInfo: {},

				groupUser: '', //分享人的id
				modalFree: false,

				latitude: '',
				longitude: '',

				merchantList: [],

				freeData: {}, //免单区内容
			};
		},

		onLoad(options) {
			let that = this;

			app.getLocation().then(res => {
				console.log(res.result, "res.result")
				that.latitude = res.result.location.lat;
				that.longitude = res.result.location.lng;
				// let local = this.latitude + "," + this.longitude;
				app.isLogin({}, function(login) {
					console.log(login, "loginlogin")
					that.mineInfo = login;
					console.log(options, "options")
					that.esFreeData(); //获取免单区内容
					if (options.parentUid) {
						that.QrcodeMed();
						that.getShareInvitePageInfo();
						that.getList();
					} else if (options.scene) {
						let qrSourceId = decodeURIComponent(options.scene).split('=')[1];
						app.QrcodeSource(qrSourceId).then(qrinfo => {
							console.log(qrinfo, "qrinfo111")
							let xuScene = decodeURIComponent(qrinfo.dbScene)
							console.log(xuScene, "xuScene1111")

							let xuData = {}
							let xuParams = xuScene.split('&')
							for (var i in xuParams) {
								var val = xuParams[i].split('=');
								val.length > 0 && val[0] && (xuData[val[0]] = val[1] || null)
							}
							console.log(xuData, "xuData1111")


							if (xuData.parentUid) { //分享人的ID
								// 为分享海报给好友看到的页面
								that.parentUid = xuData.parentUid
							}
							that.QrcodeMed();
							that.getShareInvitePageInfo();
							that.getList();
						})
					} else {
						that.QrcodeMed();
						that.getShareInvitePageInfo();
						that.getList();
					}

				})
			}).catch(rej => {
				that.latitude = rej.lat;
				that.longitude = rej.lng;
				that.QrcodeMed();
				that.esFreeData(); //获取免单区内容
				that.getShareInvitePageInfo();
				that.getList();
			})

			if (options.parentUid) {
				that.parentUid = options.parentUid
			}


		},
		onReady() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 + uni
				.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		},
		onShow() {
			this.mineInfo = uni.getStorageSync('mineInfo');
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
		},
		onShareAppMessage(res) {
			return {
				title: '邀请好友得积分',
				imageUrl: 'https://imgs.ynz666.com/2024/03/21/ZWNlNTE5N2RjNzUyY2FiNGQzNmI3ZTBkMGNmNDFlZTU=.png',
				path: `/pageD/points/points?parentUid=${this.mineInfo.id}`
			}
		},
		onReachBottom() {

		},
		methods: {
			// 免单区 积分 公告
			esFreeData() {
				let local = this.latitude + "," + this.longitude;
				apiEsFree({
					location: local
				}).then(res => {
					this.freeData = res.data

				})
			},
			// 获取附近商家列表
			getList() {
				var that = this;

				let local = that.latitude + "," + that.longitude;
				const params = {
					page: 1,
					pageSize: 4,
					location: local,
					adCode: '440300000000',
					adType: 2,
					category: 0,
					sort: 1, //1.按距离排序 2.销量排序 3.智能排序
					business: 1, //1.精选 2.买单商家 3.免单商家 4.推荐商家
				}
				apiEsStoreList(params).then(res => {
					switch (res.code) {
						case 200:
							that.merchantList = res.data.data
							break;
						default:
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
							break;
					}
				})

			},
			jumpDetil(id) {
				let that = this;
				uni.navigateTo({
					url: '/pages/storeDetail/storeDetail?store_id=' + id,
				});

			},
			getShareInvitePageInfo() {
				userPointsStatus().then(res => {
					this.myInfo = res.data
				})
			},
			// 立即领取
			drawDown() {
				let data = {
					parentUid: this.parentUid,
					uid: '',
				}
				userPoints(data).then(res => {
					console.log(res, "res")
					if (res.code == 200) {
						// uni.showToast({
						// 	title: '你已领取成功',
						// 	icon: "none"
						// })
						this.modalFree = true
						this.myInfo.status = true
					}
				})
			},
			getFreeCard() {
				this.modalFree = false
			},
			openPage(pageBig, page) {
				uni.navigateTo({
					url: `/${pageBig}/${page}/${page}`
				})
			},
			jumpPageTab() {
				uni.switchTab({
					url: '/pages/integral/integral'
				})
			},
			jumpPage() {
				uni.navigateTo({
					url: `/pageC/earnings/earnings`
				});
			},
			// 返回按钮
			tapToBack(page) {
				// console.log(1)
				switch (page) {
					case 'index':
						uni.switchTab({
							url: '../index/index'
						})
						break;
					case 'back':
						// console.log(2)
						uni.navigateBack({
							delta: 1,
							fail() {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})
						break;
				}
			},
			// 分享海报
			sharePoster() {
				this.handleStartDrawImg();
				this.showPoster = true;

			},
			handleStartDrawImg() {
				console.log(this.codeimg, "this.codeimg")
				this.template = {
					width: '600px',
					height: '800px',
					background: "#fff",
					borderRadius: '24px',
					views: [{
							type: 'image',
							url: 'https://imgs.ynz666.com/2023/12/06/ZmJmMTdlODg1MzMxNTBlODQ3YjAzOGI5YWU3MzlmZjM=.png',
							mode: 'aspectFit',
							css: {
								top: '0px',
								left: '0px',
								width: '600px',
								height: '800px',
								borderRadius: '24px',
							}
						},
						{
							type: 'image',
							url: this.codeimg,
							mode: 'aspectFit',
							css: {
								top: '225px',
								left: '200px',
								width: '200px',
								height: '200px',
								borderRadius: '10px',
								// bottom: '89px',
								// right: '32px',
								// width: '182px',
								// height: '182px',
								// borderRadius: '50px',
							}
						},
					]
				};
			},
			onImgOK(e) {
				console.log(e, "eee")
				this.imagePath = e.detail.path;
			},
			onImgErr(e) {
				console.log(e, "eee2222")
			},
			closeMask() {
				this.modalFlag = false;
				this.showPoster = false;
			},
			// 生成小程序码
			QrcodeMed() {
				let that = this;
				// http.post('/api/platform/v1/sale/info').then(info => {
				// if (info.data.saleId) {
				// that.saleId = info.data.saleId;
				let data = {
					path: 'pageD/points/points',
					width: 150,
					isHyaline: false,
					type: 0, //1 售卡码  2团购列表码   8销售首页码  6积分邀请
					scene: `parentUid=${this.mineInfo.id}`,
					sourceId: '1'
				}
				http.post('/api/user/v1/qrCode', data).then(code => {
					let qrUrl = 'https://imgs.ynz666.com/' + code.data.qrCodeUrl
					that.codeimg = qrUrl;

				})
				// }
				// }).catch(error => {})
			},
			// 保存到相册
			saveImg() {
				let that = this;
				app.photosAblum(function() {
					uni.saveImageToPhotosAlbum({
						filePath: that.imagePath,
						success(down) {
							uni.hideLoading();
							that.showPoster = false;
							uni.showToast({
								title: '图片保存成功',
								icon: 'none'
							})
						}
					})
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.container {
		padding-bottom: 300rpx;
	}

	.left-button-box {
		// width: 160rpx;
		// background-color: rgba(255, 255, 255, 0.5);
		// border-radius: 40rpx;
		display: flex;
		// justify-content: center;
		align-items: center;
		// margin-left: 30rpx;
		// border: 1rpx solid rgba(224, 224, 224, 0.6);
		position: absolute;
		left: 30rpx;
		z-index: 7;

		.line {
			height: 30rpx;
			background: #CCCCCC;
			width: 1rpx;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			margin: 0 20rpx;
		}
	}

	.top-nav {
		// background: linear-gradient(180deg, #F77539 0%,rgba(0,0,0,0) 100%);
		position: relative;
		z-index: 5;
		// image {
		// 	width: 100%;
		// 	height: 100%;
		// 	// position: absolute;top: 0;left: 0;
		// 	z-index: -1;
		// }
		// .img{
		// 	width: 188rpx;
		// 	height: 36rpx;
		// }
	}

	.title_one {
		margin: 0 20rpx;
		padding-top: 20rpx;
		position: relative;

		.title_top {
			display: flex;
			align-items: center;
			justify-content: center;

			.view1 {
				font-size: 40rpx;
				font-family: FZXHJW-GB1, FZXHJW-GB1;
				font-weight: normal;
				color: #FFFFFF;
			}
		}
	}

	/* 背景 */
	.bg-view {
		width: 100vw;
		height: 431rpx;

		.bg_box {
			height: 431rpx;
			// background: linear-gradient(180deg, #F77539 0%, #FEFDFB 100%);
		}

		.bg-image {
			z-index: -1;
			display: block;
			width: 100%;
			height: 431rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.status_nav {
		width: 100vw;
	}

	.Index_tab_top {
		font-size: 38rpx;
		font-weight: 500;
		color: #141414;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 5;

		.scan-box {
			margin-left: 30rpx;
			width: 160rpx;
			height: 58rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 28rpx;
			border: 1rpx solid #FA6400;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
		}

		.mine-txt {
			color: #fff;
			font-size: 32rpx;
		}
	}

	.share-mission {
		background-color: #fff;
		padding: 20rpx 20rpx 115rpx 20rpx;
	}

	.share-mission-title {
		margin: 20rpx 0;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;

		view:nth-child(2) {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}
	}

	.share-mission-list {
		padding: 20rpx 0;
	}

	.share-mission-item {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.mission-left {
			display: flex;
			align-items: center;
		}

		.share-no {
			width: 46rpx;
			height: 46rpx;
			line-height: 46rpx;
			border-radius: 50%;
			background: #FF4D4F;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			margin-right: 20rpx;
		}

		.share-content {
			view:nth-child(1) {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
				margin-bottom: 4rpx;
			}

			view:nth-child(2) {
				font-size: 22rpx;
				color: #666666;
				line-height: 30rpx;
			}
		}

		.share-btn {
			width: 100rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 24rpx;
			border: 1rpx solid #FF4D4F;
			font-size: 22rpx;
			font-weight: bold;
			color: #FF4D4F;
			text-align: center;
		}

		.button-re {
			position: relative;

			button {
				width: 100rpx;
				height: 48rpx;
				border-radius: 24rpx;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				border: 1rpx solid red;
			}
		}
	}

	.share-progress {
		width: 1rpx;
		height: 50rpx;
		background-color: #efefef;
		margin-left: 24rpx;
	}

	// banner广告
	.index-banner {
		width: 710rpx;
		height: 180rpx;
		margin: 0 auto;
		margin-top: -85rpx;
		border-radius: 12rpx;
		position: relative;

		swiper,
		swiper-item {
			width: 710rpx;
			height: 180rpx;
		}

		image {
			width: 710rpx;
			height: 180rpx;
			display: block;
			border-radius: 12rpx;
		}
	}


	.main1 {
		width: 710rpx;
		height: 597rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 10rpx 10rpx;
		margin: -150rpx auto 0;

		.top {
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #333333;
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.bot {
			margin: 0 25rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				width: 321rpx;
				height: 216rpx;
				border-radius: 12rpx;

				.img {
					width: 321rpx;
					height: 216rpx;
				}
			}

			.item:nth-child(3),
			.item:nth-child(4) {
				padding-top: 32rpx;
			}
		}
	}

	.data {
		width: 710rpx;
		margin: 20rpx auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.con {
			width: 340rpx;
			height: 128rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.top {
				display: flex;
				align-items: center;
				padding: 20rpx 0 0 20rpx;

				.img {
					width: 34rpx;
					height: 34rpx;
				}

				.v1 {
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					padding-left: 10rpx;
				}
			}

			.bot {
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				text-align: center;
				padding-top: 4rpx;
			}
		}
	}

	.poi_box1 {
		width: 710rpx;
		margin: 20rpx auto 0;

		.img {
			width: 100%;
			height: 180rpx;
		}
	}

	.main2 {
		width: 710rpx;
		border-radius: 10rpx;
		margin: 0rpx auto 0;

		.top {
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #333333;
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.bot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			.b_item {
				display: flex;
				width: 314rpx;
				height: 128rpx;
				background: #fff;
				border-radius: 10rpx;
				padding: 16rpx;
				margin-bottom: 20rpx;

				.item_l {
					width: 128rpx;
					height: 128rpx;

					.item_img {
						width: 128rpx;
						height: 128rpx;
						border-radius: 4rpx;
					}
				}

				.item_r {
					padding-left: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;

					.rig_v1 {
						font-size: 26rpx;
						color: #333333;
						word-break: break-all;
						white-space: pre-wrap;
						word-wrap: break-word;
						overflow: hidden;
						display: -webkit-box;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.rig_v2 {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 10rpx;

						.t1 {
							font-size: 24rpx;
							color: #E64E1F
						}

						.t2 {
							width: 46rpx;
							height: 36rpx;
							background: linear-gradient(310deg, #F43B00 0%, #FA6D00 100%);
							border-radius: 6rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}

			.item {
				width: 150rpx;

				.img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}

				.text {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-top: 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.main3 {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx auto 0;

		.top {
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #333333;
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.bot {
			margin: 0 24rpx;
			padding-bottom: 30rpx;

			.item {
				margin-top: 30rpx;

				.item_top {
					display: flex;
					align-items: center;

					.left {
						width: 10rpx;
						height: 38rpx;
						background: #F43B00;
						border-radius: 5rpx;
					}

					.right {
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #F43B00;
						margin-left: 20rpx;
					}
				}

				.item_bot {
					margin-top: 19rpx;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}
			}
		}
	}

	.foot {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 32rpx;
		padding-bottom: 52rpx;
		position: fixed;
		bottom: 100rpx;

		.btn {
			width: 710rpx;
			height: 120rpx;

			.btn_box {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 710rpx;
				height: 120rpx;
				background: #F43B00;
				box-shadow: -4rpx 3rpx 29rpx 0rpx rgba(161, 39, 0, 0.5);
				border-radius: 60rpx;
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;

				.text1 {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.btn_sha {
					width: 520rpx;
					height: 120rpx;
					border-radius: 28rpx 0px 0px 28rpx;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
					border: 1rpx solid red;
				}
			}
		}

		.btn_pho {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}
	}

	.mask_hb {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.85);
		z-index: 10000;

		.mask_box {
			width: 600rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-65%);
			left: 50%;
			margin-left: -300rpx;
			height: 800rpx;

			.poster {
				width: 600rpx;
				position: absolute;
				top: 0;
			}

			.down_box1 {
				width: 600rpx;
				position: absolute;
				bottom: -118rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.box_btn1 {
					width: 200rpx;
					height: 78rpx;
					background: linear-gradient(317deg, #F43B00 0%, #F43B00 0%, #FA6D00 100%);
					border-radius: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}

					button {
						width: 200rpx;
						height: 78rpx;
						border-radius: 50rpx;
						position: absolute;
						top: 0;
						opacity: 0;
						border: 1rpx solid red;
					}
				}

				.box_btn2 {
					width: 200rpx;
					height: 78rpx;
					background: linear-gradient(317deg, #F43B00 0%, #F43B00 0%, #FA6D00 100%);
					border-radius: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.fot {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: -200rpx;

				.img {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}




		.down-box {
			position: fixed;
			width: 100vw;
			bottom: 0;
			left: 0;
			background-color: #fff;
			border-radius: 44rpx 44rpx 0 0;
			padding: 60rpx 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #333333;

			image {
				margin-bottom: 8rpx;
				width: 58rpx;
				height: 58rpx;
				border-radius: 50%;
			}
		}
	}


	.maskFour {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.65);

		.maskFour_box {
			width: 600rpx;
			overflow: hidden;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -300rpx;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.free_img {
				width: 600rpx;
				height: 600rpx;
			}
			.btn_all{
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.btn1{
					width: 250rpx;
					height: 78rpx;
					background: #F0F0F0;
					border-radius: 39rpx;
					font-size: 28rpx;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.btn2{
					margin-left: 40rpx;
					width: 250rpx;
					height: 78rpx;
					background: #F43B00;
					border-radius: 39rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.free_btn {
				width: 461rpx;
				height: 78rpx;
				margin: 30rpx 0 25rpx;
			}

			.free_close {
				width: 42rpx;
				height: 42rpx;
			}
		}
	}

	// 数据中心
	.date-center {
		margin: 30rpx 0 56rpx 0;
		padding: 0 20rpx;
	}

	.date-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.date-box {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 48rpx;
	}

	.date_topBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.view1 {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.view2 {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #F43B00;
			margin: 8rpx 0;
		}

		.view3 {
			min-width: 116rpx;
			height: 40rpx;
			background: #F4F4F4;
			border-radius: 20rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.date_botBox {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.date-item {

		view:nth-child(1),
		view:nth-child(3) {
			font-size: 24rpx;
			color: #868A93;
		}

		view:nth-child(2) {
			font-size: 44rpx;
			font-weight: bold;
			color: #141414;
			line-height: 62rpx;
		}

		view:nth-child(3) {
			color: #8C8C8C;
		}
	}

	.kefu {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		text-decoration: underline;
		padding-bottom: 100rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.85);
		z-index: 10000;

		.poster {
			width: 650rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-65%);
			left: 50%;
			margin-left: -325rpx;
		}

		.down-box {
			position: fixed;
			width: 100vw;
			bottom: 0;
			left: 0;
			background-color: #fff;
			border-radius: 44rpx 44rpx 0 0;
			padding: 60rpx 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #333333;

			image {
				margin-bottom: 8rpx;
				width: 58rpx;
				height: 58rpx;
				border-radius: 50%;
			}
		}
	}
</style>
